<template name="user">
	<view class="main-body" style="background-color: #ffffff;">
		<cu-custom  :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">修改密码</block>
		</cu-custom>
		<scroll-view scroll-y class="page">
			<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<view class="cu-form-group margin-top">
					<view class="biao">
						原密码
					</view>
					<input class="shurukuang" placeholder="请输入原密码" :password="!showPassword" name="input"
						v-model="oldPassword"></input>
				</view>
				<view class="split"></view>
				<view class="cu-form-group margin-top">
					<view class="biao">
						新密码
					</view>
					<input class="shurukuang" placeholder="请输入新密码" :password="!showPassword" v-model="password" />
					<!-- <view class="biao" style="width: 20px;" @click="changePassword" :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']">
								<u-icon v-if="!showPassword" color="#849af9" name="eye-fill" size="20"></u-icon>
								<u-icon v-if="showPassword" color="#849af9" name="eye-off" size="20"></u-icon>
							</view> -->
				</view>
				<view class="split"></view>
				<view class="cu-form-group margin-top">
					<view class="biao">
						确认新密码
					</view>
					<input class="shurukuang" placeholder="请确认新密码" :password="!showPassword" name="input"
						v-model="password2"></input>
				</view>
			</view>
			<view>
				<view class="padding text-center margin-top" style="margin-top: 133.57upx;">
					<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" @tap="onLogin"><text
							space="emsp">完成</text>
					</button>
				</view>
			</view>

			<!-- <image src="/static/componentBg.png " mode="widthFix" class="response"></image> -->
			<!-- 	<view class="nav-list">
				<navigator hover-class="none" :url="'/pages/common/' + item.name" class="nav-li" navigateTo
					:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
					v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view> -->
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex"
	export default {
		name: 'user',
		data() {
			return {
				shape: '', //round 圆形
				loading: false,
				userName: 'admin',
				password: '',
				password2: '',
				oldPassword: '',
				showPassword: false, //是否显示明文
				elements: [{
					title: '退出',
					name: 'exit',
					color: 'cyan',
					cuIcon: 'newsfill',
					auth: 'ac'
				}],
			}
		},
		onLoad: function() {

			var that = this;
			console.log(this.$store.getters.username)

		},
		methods: {
			...mapActions(["changePass"]),
			onLogin: function() {
				if (!this.oldPassword || this.oldPassword.length == 0) {
					this.$tip.toast('请填写原密码');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写新密码');
					return;
				}
				if (!this.password2 || this.password2.length == 0) {
					this.$tip.toast('请填写确认新密码');
					return;
				}
				if (this.password2 != this.password) {
					this.$tip.toast('两次密码输入不一致');
					return;
				}
				let loginParams = {
					username: this.$store.getters.username,
					// username: 'admin',
					confirmpassword: this.password,
					password: this.password
				}
				console.log(loginParams)
				this.loading = true;
				this.changePass(loginParams).then((res) => {
					console.log(res)
					this.loading = false;
					if (res.data.success) {
						// this.$tip.success('修改成功!')
						setTimeout(()=>{
							this.$Router.replaceAll({
								name: 'login'
							})
						},1000)
						
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
		}
	}
</script>

<style>
	.main-body {
		width: 100vw;
		background-color: #F5F7FF;
		height: calc(100vh - 44px);
		overflow: hidden;
		font-family: MicrosoftYaHei;
	}
	/deep/ .cu-custom {
		background-image: linear-gradient(45deg, #1cbbb4, #1cbbb4);
		color: #ffffff;
		/* position: fixed; */
		width: 100%;
		z-index: 1024;
	}

	.split {
		height: 1px;
		width: 100%;
		background: #F5F7FF;
	}

	.login-paddingtop {
		margin-top: 20upx;
	}


	.box {
		width: 100%;
		/* 		height: 577.14upx; */
		background-color: #fff;
	}

	.input-placeholder {
		color: #394b84;
	}


	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.cu-btn {
		width: calc(100% - 70upx);
		height: 90.71upx;
		/* background-color: #1bc7ff; */
		background-image: linear-gradient(0deg,
				#009cdd 0%, 
				#29cd94 100%), 
			linear-gradient(
				#1082ff, 
				#1082ff);
			background-blend-mode: normal, 
				normal;
			box-shadow: 0px 9px 21px 0px 
				rgba(16, 130, 255, 0.37);
		border-radius: 45upx;
	}

	.cu-btn /deep/ span {
		/* color:#fff; */
		font-size: 38.57upx;
		color: #fff;
		line-height: 90.71upx;
	}

	.cu-form-group {
		/* width: calc(100% - 140upx); */
		width: calc(100% - 100px);
		height: 100upx;
		background-color: #ffffff;
		border-radius: 45upx;
		opacity: 0.4;
		/* padding: 0 35.71upx; */
		margin: 0 35upx;
	}

	.biao {
		display: inline-block;
		/* width: 143upx; */
		width: 100px;
		height: 100upx;
		line-height: 100upx;
		float: left;
		font-size: 34.28upx;
		color: #253758;
		/* 	align-items: center; */
	}

	.biao /deep/ .u-icon {
		height: 100%;
	}

	.pass {
		width: calc(100% - 50px);
	}

	.shurukuang {
		display: inline-block;
		height: 100upx;
		float: left;
		/* 	line-height:90.71upx;
		align-items: center; */
	}
</style>
